<template>
  <div class="app-container">
    <div class="app-container_conter">
    <div style="display: flex;justify-content: space-between">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" style="display: flex;justify-content: space-between;align-items:flex-end ">
        <div style="display: flex;flex-flow: wrap">
        <el-form-item label="雇员姓名" prop="name">
          <el-input
              v-model="queryParams.name"
              placeholder="请输入雇员姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="保单号" prop="insure_no">
          <el-input
              v-model="queryParams.insure_no"
              placeholder="请输入保单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="证件号码" prop="id_card_no">
          <el-input
              v-model="queryParams.id_card_no"
              placeholder="请输入证件号码"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="方案名称" prop="plan_name">
          <el-input
              v-model="queryParams.plan_name"
              placeholder="请输入方案名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用工单位" prop="company">
          <el-input
              v-model="queryParams.company"
              placeholder="请输入用工单位"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="被保险人" prop="sys_id">
          <el-select v-model="queryParams.sys_id" placeholder="请选择"  @change="getInsuresd">
            <el-option
                v-for="dict in insured"
                :key="dict.user_id"
                :value="dict.user_id"
                :label="dict.user_name"
            >{{ dict.user_name }}
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="用户类型" prop="is_approve_user">
          <el-select v-model="queryParams.is_approve_user" placeholder="请选择" >
            <el-option
                v-for="dict in ApproveUser"
                :key="dict.id"
                :value="dict.id"
                :label="dict.name"
            >{{ dict.name }}
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" >
            <el-option
                v-for="dict in status"
                :key="dict.dictValue"
                :value="dict.dictValue"
                :label="dict.dictLabel"
            >{{ dict.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="timeData">
          <el-date-picker
              style="width: 240px"
              v-model="queryParams.timeData"
              type="daterange"
              range-separator="-"
              value-format="yyyy-MM-dd"
              start-placeholder="生效时间"
              end-placeholder="失效时间">
          </el-date-picker>
        </el-form-item>
        </div>
        <div style="width:150px;">
        <el-form-item style="width:150px;text-align: right;">
          <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="info"  size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        </div>
      </el-form>
      <!--      <div>-->
      <!--        <el-button type="primary" @click="getBack">返回</el-button>-->
      <!--      </div>-->
    </div>
    <el-row :gutter="10" class="mb8">
      <div style="display: flex;align-items: center;justify-content: space-between">
        <div>
          <el-button
              size="small"
              type="primary"
              @click="handleExport"
              v-hasPermi="['insurance:user:approveDetailExport']"
          >导出
          </el-button>
          <!--          v-hasPermi="['insurance:user:import']"-->
          <!--          <el-button-->
          <!--              type="warning"-->
          <!--              plain-->
          <!--              icon="el-icon-download"-->
          <!--              size="mini"-->
          <!--              @click="handleExport"-->
          <!--              v-hasPermi="['insurance:user:approveDetailExport']"-->
          <!--          >批单明细-->
          <!--          </el-button>-->
        </div>
        <div>

          <el-button
              style="background: #0793FF;color: #FFFFFF"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['insurance:user:edit']"
          >修改
          </el-button>
          <el-button
              style="margin-right: 10px"
              type="info"
              size="mini"
              :disabled="multiple"
              @click="handleDelete1"
              v-hasPermi="['insurance:user:remove']"
          >删除
          </el-button>
<!--          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
        </div>
      </div>

    </el-row>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" :header-cell-style="tableHeaderColor">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="人员编号" align="center" prop="j_id"/>-->
      <el-table-column label="保单号" align="center" prop="insure_no" fixed min-width="180px"/>
      <el-table-column label="上级用户" align="center" prop="create_by" min-width="100px"/>
      <el-table-column label="被保险人" align="center" prop="user_name" min-width="100px"/>

      <el-table-column label="雇员姓名" align="center" prop="name" min-width="100px"/>
      <el-table-column label="方案名称" align="center" prop="plan_name" min-width="100px"/>
      <el-table-column label="证件名称" align="center" prop="id_card_type_name" min-width="120px"/>
      <el-table-column label="证件号码" align="center" prop="id_card_no" min-width="170px"/>
      <!--      is_approve_user-->
      <el-table-column label="工种类别" align="center" prop="type" min-width="100px"/>
<!--      <el-table-column label="健康情况" align="center" prop="healthCond"/>-->
      <!--      v-if="show=false"-->
      <div v-if="queryParams1.role_id!=15">
        <el-table-column label="月收入" align="center" prop="income_month" min-width="100px">
                  <template slot-scope="scope">
                    <span>
                      {{scope.row.income_month? scope.row.income_month: 0}}
                    </span>
                  </template>
        </el-table-column>
      </div>
      <el-table-column label="用工单位" align="center" prop="company" min-width="180px"/>
      <el-table-column label="工种名称" align="center" prop="industry_name" min-width="130px"/>
      <div v-if="queryParams1.role_id!=15">
        <el-table-column label="保费" align="center" prop="price" min-width="100px">

        </el-table-column>
      </div>
      <el-table-column label="创建时间" align="center" prop="create_time" min-width="150px"/>
      <!--      <el-table-column label="用户类型" align="center" prop="is_approve_user"/>-->
      <el-table-column label="在保状态" align="center" prop="status2" min-width="100px"/>
      <!--      <el-table-column label="状态 " align="center" prop="status" :formatter="statusFormat"/>-->
      <el-table-column label="操作" align="center" min-width="150px" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--          <el-button-->
          <!--            v-show="scope.row.insureEli.insureNo!=null"-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-warning-outline"-->
          <!--            v-hasPermi="['insurance:repordRecord:add']"-->
          <!--            @click="handlePolice(scope.row)"-->
          <!--          >报案-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--              size="mini"-->
          <!--              type="text"-->
          <!--              icon="el-icon-warning"-->
          <!--              v-hasPermi="['insurance:user:remove']"-->
          <!--              @click="getReject(scope.row)"-->
          <!--          >驳回-->
          <!--          </el-button>-->
          <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['insurance:user:edit']"
          >修改
          </el-button>
          <el-button
              style="color:#FF0000 "
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              v-hasPermi="['insurance:user:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <pagination
        style="background: transparent"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改投保用户对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="雇员姓名">
              <el-input v-model="form.name" placeholder="请输入雇员姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="雇员性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option
                    v-for="dict in sexOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证件类型" prop="id_card_type_id">
              <el-select v-model="form.id_card_type_id" placeholder="请选择" style="width: 280px">
                <el-option
                    @click.native="getCardType(item)"
                    v-for="item in idCardTypeList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                    :disabled="item.status === '0'"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码" prop="id_card_no">
              <el-input v-model="form.id_card_no" placeholder="请输入证件号码"/>
            </el-form-item>
          </el-col>
          <!--          TODO 做成选择-->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工种类别" prop="type">
              <!--              <treeselect style="width: 250px" v-model="form.industryId" @select="selectDepart" :options="industryOptions"-->
              <!--                          :normalizer="normalizer" placeholder="请选上级分类"/>-->
              <el-select v-model="form.type" placeholder="请选择" style="width: 280px">
                <el-option
                    v-for="dict in TypeworkId"
                    :key="dict.dictValue"
                    :value="dict.dictValue"
                    :label="dict.dictLabel"
                >{{ dict.dictLabel }}
                </el-option>

              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="健康情况" prop="health_cond">
              <el-select v-model="form.health_cond" placeholder="请选择" style="width: 280px">
                <el-option
                    v-for="dict in healthy"
                    :key="dict.dictValue"
                    :value="dict.dictValue"
                    :label="dict.dictLabel"
                >{{ dict.dictLabel }}
                </el-option>

              </el-select>
            </el-form-item>

          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="月收入" prop="income_month">
              <el-input v-model="form.income_month" placeholder="请输入月收入"/>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="保费" prop="price">
              <el-input v-model="form.price" placeholder="请输入保费"/>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="岗位名称" prop="industry_name">
              <el-input v-model="form.industry_name" placeholder="请输入岗位名称"/>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="用工单位" prop="company">
              <el-input v-model="form.company" placeholder="请输入用工单位"/>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入备注内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态 " prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                >{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button type="info" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--    上传文件导入弹框-->
    <el-dialog :title="upload.title" :visible.sync="upload.open1" width="400px" append-to-body>
      <!--      accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"-->
      <el-upload
          ref="upload"
          class="upload-demo"
          action :limit="1"
          :on-exceed="formHandleExceed"
          :file-list="formFileList"
          :on-remove="formHandleRemove"
          :http-request="handleUpdateForm"
          :before-upload="beforeUploadForm"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.isSupportUpdate"/>
          是否更新已经存在的用户数据
          <el-link type="info" style="font-size:12px;color: #00afff" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open1 = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
        :title="dialog3.title"
        :visible.sync="dialog3.dialogVisible"
        width="30%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="原因">
            <el-input v-model="form.reason" placeholder="请填写驳回原因" style="width: 250px"></el-input>
          </el-form-item>

          <!--      <el-form-item>-->
          <!--        <el-button>取消</el-button>-->
          <!--        <el-button type="primary" @click="onSubmit">确认</el-button>-->

          <!--      </el-form-item>-->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
     <el-button type="primary" @click="dialog3.dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialog3.dialogVisible = false">确认</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUser1,
  getUser2,
  importTemolate,
  userRemove,
  approveDetailExport,
  seacond_admin,
  delete_user
} from "@/api/insurance/user";
import {listIdCardType, get_card_type} from "@/api/base/idCardType";
import {getToken} from "@/utils/auth";
import {listIndustry} from "@/api/insurance/industry";
import {get_base_industry} from "@/api/insurance/repordRecord"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {addapprove} from "@/api/insurance/approveLog";
import {listUser1} from "../../../api/insurance/user";
import Template from "../../base/template";

export default {
  name: "User",
  components: {
    Template,
    Treeselect
  },
  data() {
    return {
      show: true,
      dialog3: {
        title: '驳回原因',
        dialogVisible: false,
      },
      formMaxSize: 10,//上传文件大小
      formFileList: [],//显示上传文件
      uploadFormFileList: [],//确定上传文件
      contentHtml: '',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 投保用户表格数据
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态 字典
      statusOptions: [],
      //性别  字典
      sexOptions: [],
      //证件类型
      idCardTypeList: [],
      // 查询参数
      queryParams: {
        sys_id: '',//二级权限id
        user_id: '',//操作人id
        pageNum: 1,
        pageSize: 10,
        name: null,
        id_card_no: null,
        insureId: null,
        insure_no: null,
        company: null,//用工单位
        months: [],
        quarters: [],
        year: '',
        type: '',
        is_approve_user: '',//用户类型
        plan_name: '',//方案名称
        status: null,
        is_export: 0,// 是否导出 1是 0否
        is_all: 0,// 是否全部导出 1是 0否
        timeData: [],
      },
      queryParams2: {
        sys_id: '',//二级权限id
        user_id: '',//操作人id
        pageNum: 1,
        pageSize: 10,
        is_export: 1,// 是否导出 1是 0否
        is_all: 0,// 是否全部导出 1是 0否
        customer_id: '' //全部导出传空，否则数组形式传递所导用户id
      },
      //工种类型
      TypeworkId: [],
      //健康状况
      healthy: [],
      // 表单参数
      form: {
        // insureId: null, //投保id
        customer_id: null,
        user_id: '',  //操作人id
        name: null,//雇主姓名
        sex: null,//性别
        id_card_type_id: null,//证件类型
        idCardTypeName: null,//证件类型名称
        id_card_no: null,//证件号码
        industryId: null,//工种id(1:1-3类；2：4类)
        industry_name: null,//职务名称
        health_cond: null,//健康情况
        income_month: null,//月收入
        company: null,//用工单位
        position: null,//职务名称
        type: '',//工种类别
        remark: null,//备注
        price: null,//保费
        // createTime: null,//
        // updateTime: null,
        status: "0"
      },
      // 表单校验
      rules: {
        name: [
          {required: true, message: '请输入雇员姓名', trigger: 'blur'},
        ],
        sex: [
          {required: false, message: '请选择性别', trigger: 'change'}
        ],
        id_card_type_id: [
          {required: false, message: '请选择证件类型', trigger: 'change'}
        ],
        id_card_no: [
          {required: true, message: "证件号码不能为空", trigger: "blur"},
          {pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/, message: '请输入正确的证件号码'}
        ],
        industryId: [
          {required: false, message: '请选择工种名称', trigger: 'change'}
        ],
        health_cond: [
          {required: false, message: '请选择健康情况', trigger: 'change'}
        ],
        income_month: [
          {required: false, message: "请输入月收入", trigger: "blur"}
        ],
        price: [
          {required: true, message: "请输入保费", trigger: "blur"}
        ],
        industry_name: [
          {required: false, message: "请输入职务名称", trigger: "blur"}
        ],
        company: [
          {required: false, message: "请输入用工单位", trigger: "blur"}
        ],
        remark: [
          {required: false, message: "请输入用工单位", trigger: "blur"}
        ],
        type: [
          {
            required: false, message: '请选择工种类别', trigger: 'change'
          }
        ],
        status: [
          {
            required: false, message: '请选择状态', trigger: 'change'
          }
        ]
      },
      id: '',//投保单id
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open1: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否更新已经存在的用户数据
        isSupportUpdate: false,
      },
      //用户类型
      ApproveUser: [
        {
          id: 1,
          name: '批改'
        },
        {
          id: 0,
          name: '投保'
        }
      ],
      // 职业分类树选项
      industryOptions: [],
      status: [], // 审核状态
      queryParams1: {
        user_id: '',
        role_id: '',
      },
      insured: '',//被保险人
      delList: {
        eli_id: '',// 保单id
        uid: '',//当前操作用户id
        type: 2,//选择方式  1全选  2单选
        user_id: '',//二级权限用户id，可传空
        customer_id: '',//被删除用户id,数组形式，可传空
      }

    };
  },

  created() {
    this.form.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.queryParams.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.queryParams2.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.delList.uid = JSON.parse(localStorage.getItem('userInfo')).userId;
    var user = JSON.parse(localStorage.getItem('userInfo'));
    this.queryParams1.user_id = user.userId;
    if (user.roles.length != 0) {
      this.queryParams1.role_id = user.roles[0].roleId
    }
    var company = this.$route.query.info;
    if (company != undefined) {
      this.queryParams.company = company.company
      this.queryParams.status = company.status
      this.queryParams.timeData = company.timeData
    }

    // console.log('info',company)
    // console.log('user操作人',user)
    var insureInfo1 = this.$route.query.insureInfo1;
    var insureInfo = this.$route.query.insureInfo;
    // console.log('insureInfo', insureInfo)
    // var userInfo=this.$route.query.userInfo;
    // if (userInfo != undefined) {
    //   this.queryParams.id_card_no = userInfo.id_card_no;
    // }
    if (insureInfo1 != undefined) {
      this.queryParams.status = insureInfo1.status;
    }
    if (insureInfo != undefined) {
      this.form.insureId = insureInfo.id;
      this.delList.eli_id = insureInfo.id;
      // this.queryParams.status = insureInfo.status;
      this.queryParams.insureId = insureInfo.id;
    }
    // console.log('queryParams', this.queryParams)
    var peopleNum = this.$route.query.peopleNum;
    // console.log('peopleNum', peopleNum)
    if (peopleNum != undefined) {
      this.queryParams.year = peopleNum.year;
      this.queryParams.months = peopleNum.month;
      this.queryParams.quarters = peopleNum.quarters;
      this.queryParams.type = peopleNum.type;
      this.queryParams.is_approve_user = peopleNum.isApproveUser
      this.queryParams.sys_id=peopleNum.sys_id
      // console.log('num', this.queryParams)
    }
    this.getList();
    //调用查询证件类型
    this.getIdcardTypeList();
    this.getDicts("common_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("industry_type").then(response => {
      this.TypeworkId = response.data;
      // console.log('TypeworkId', this.TypeworkId)
    });
    this.getDicts("sys_user_sex").then(res => {
      this.sexOptions = res.data;
    })
    this.getDicts("health_cond").then(res => {
      this.healthy = res.data;
    })
    //审核状态
    this.getDicts("user_status").then(res => {
      // console.log("status", res)
      this.status = res.data;
    })
    // console.log('queryParams1', this.queryParams1)
    seacond_admin(this.queryParams1).then(res => {
      this.insured = res.data;
      // console.log('被保险人数据', res)
    })
    this.getTreeselect();
  },
  methods: {
    /* 修改表头颜色 */
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #304156;color: #fff;font-weight: 400;font-family: Microsoft YaHei;'
      }
    },
    //返回上一页
    getBack() {
      this.$router.back(-1);
    },
    //点击驳回按钮
    getReject(item) {
      this.dialog3.dialogVisible = true
    },
    //选择工种名称
    selectDepart(e) {
      this.form.industryName = e.name
    },
    //选择被保险人
    getInsuresd(e) {
      this.delList.user_id = e;
      // console.log('e',e)
    },
    /** 转换职业分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      get_base_industry().then(response => {
        this.industryOptions = [];
        const data = {id: 0, name: '顶级节点', children: []};
        data.children = this.handleTree(response.data, "id", "parent_id");
        this.industryOptions.push(data);
        // console.log('工种名称', response);
        // console.log('industryOptions', this.industryOptions);
      });
    },
    //点击跳转到报案页面
    handlePolice(row) {
      // console.log('row', row)
      this.$router.push({
        path: '/business/applicationFiling/applicationAdd',
        query: {
          insureUser: row
        }
      })
      // this.$store.commit('Insure_User',row);
      // this.$store.commit('Info_Insure',this.infoUser);
      // this.infoUser=row;
      // this.open1=true;
      // this.title1='用户证件号码'
    },
    //开始上传前验证
    beforeUploadForm(file) {
      // console.log('验证', file)
      //文件大小验证
      if (file.size / 1024 / 1024 > this.formMaxSize) {
        this.$message({
          message: `上传文件大小不能超过${this.formMaxSize}M!`,
          type: 'waning'
        })
        false
      }

      //  中文乱码处理
      if (file.raw) {
        let reader = new FileReader()//读取文件内容
        reader.readAsText(file.raw, 'gb2312')//防止中文乱码问题，不加reader.onload方法都不会触发
        reader.onload = function (e) {
          this.contentHtml = e.target.result;//txt文本内容，接下来就可以对其进行校验处理了
          // console.log('contentHtml', this.contentHtml);
        }
      }
      //验证文件类型
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv'
      if (!extension) {
        this.$message({
          message: '上传文件只能是xlsx/xls/csv格式',
          type: 'warning'
        })

      }
      return extension
    },
    //移除上传列表中的文件
    formHandleRemove(file, formFileList) {
      let that = this;
      for (let i = 0; i < that.uploadFormFileList.length; i++) {
        if (that.uploadFormFileList[i].pname === file.name) {
          that.uploadFormFileList.splice(i, 1);
          break;
        }
      }
    },
    //上传文件导入
    handleUpload() {
      if (this.id != '') {
        this.upload.title = "批单";
        this.upload.open1 = true;
      } else {
        this.$alert('请先去选择保单号,再来批量新增', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            if (action == 'confirm') {
              this.$router.push({
                path: '/insureEli/index'
              })
            }
          }
        });
      }
    },
    // 下载文件
    importTemplate() {
      var obj = {
        type: '2'
      }
      importTemolate(obj).then(res => {
        this.download(res.msg);
      })
    },
    //上传导入确定按钮
    submitFileForm() {
      this.$refs.upload.submit();
      // this.$refs.upload.submit();
    },
    // 允许上传文件个数验证
    formHandleExceed(files, formFileList) {
      // console.log('files', files)
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + formFileList.length} 个文件`)
    },
    //上传文件
    handleUpdateForm(param) {
      // console.log('param', param)
      // console.log('isSupportUpdate',this.upload)
      let that = this;
      let formData = new FormData();
      // console.log('id', that.form.insureId)
      formData.append('insureId', that.form.insureId)//额外参数
      formData.append('file', param.file);
      formData.append('isSupportUpdate', that.upload.isSupportUpdate)
      // console.log('param', formData);
      addapprove(formData).then(response => {
        // console.log('res23', response)
        if (response.code == 200 && response.msg == '操作成功') {
          this.upload.open1 = false;
          this.getList();
          this.$message({
            message: '添加批单成功',
            type: 'success'
          });
        } else if (response.code == 200 && response.msg != '操作成功') {

          this.getList();
          this.$message({
            message: '添加批单成功',
            type: 'success'
          });
          this.$alert('是否要将添加批单部分错误的信息导出', '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.upload.open1 = false;
              if (action == 'confirm') {
                let link = document.createElement('a'); // 创建a标签
                link.style.display = 'none';
                let objectUrl = response.msg;
                link.href = objectUrl;
                link.click();

              }
            }
          });
        }


      })
    },
    getCardType(item) {
      this.form.idCardTypeId = item.id;
      this.form.idCardTypeName = item.name;
    },

    /** 查询投保用户列表 */
    getList() {
      // console.log('queryParams', this.queryParams);

      this.loading = true;
      listUser1(this.queryParams).then(response => {
        // console.log('response查询所有', response)
        this.userList = response.data.data;
        // for (var i=0;i<this.userList.length;i++){
        //   if (this.userList[i].isApproveUser){
        //     this.userList[i].isApproveUser='批单用户'
        //   }else {
        //     this.userList[i].isApproveUser='出单用户'
        //   }
        // }
        this.total = response.data.count;
        this.loading = false;

      });
    },
    //查询证件类型
    getIdcardTypeList() {
      get_card_type().then(res => {
        // console.log('res证件类型', res)
        this.idCardTypeList = res.data;
      })

      // listIdCardType().then(res => {
      //   console.log('res证件类型1',res)
      //   this.idCardTypeList = res.rows
      // })
    },
    //性别，字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex);
    },
    //工种类别 字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.TypeworkId, row.type);
    },
    // 状态 字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
    },
    // 表单重置
    reset() {
      // this.form = {
      //   insureId: '', //投保id
      this.form.customer_id = null,
          this.form.name = null,
          this.form.sex = null,
          this.form.id_card_type_id = null,
          this.form.idCardTypeName = null,
          this.form.id_card_no = null,
          this.form.industryId = null,
          this.form.industry_name = null,
          this.form.health_cond = null,
          this.form.income_month = null,
          this.form.company = null,
          this.form.position = null,
          this.form.remark = null,
          this.form.price = null,
          this.form.status = "0",

          // };
          this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // console.log('selection', selection)
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      if (this.userList.length == selection.length) {
        this.delList.customer_id = ''
        this.delList.type = 1;
        this.queryParams2.customer_id = '';
        this.queryParams2.is_all = 1;
      } else {
        this.queryParams2.is_all = 0;
        this.queryParams2.customer_id = this.ids
        this.delList.customer_id = this.ids
        this.delList.type = 2;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      // console.log('id12', this.id)
      if (this.id != '') {
        var obj = {
          id: this.id
        }
        this.$router.push({
          path: '/business/user/userAdd',
          query: {
            infoUser: obj
          }
        })
      } else {
        this.$alert('请先去选择保单号，再来新增投保用户', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            if (action == 'confirm') {
              this.$router.push({
                path: '/insureEli/index'
              })
            }
          }
        });
      }
      // this.reset();
      // this.open = true;
      // this.title = "添加投保用户";
      // console.log('form', this.form);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      //  this.reset();
      const id = row.id || this.ids
      // console.log('ids', id)

      getUser1(id).then(response => {
        // console.log('form1', response);
        // this.form = response.data;
        this.form.customer_id = response.data.customer_id
        this.form.company = response.data.company
        this.form.health_cond = response.data.health_cond
        this.form.id_card_no = response.data.id_card_no
        this.form.id_card_type_id = response.data.id_card_type_id
        this.form.id_card_type_name = response.data.id_card_type_name
        this.form.income_month = response.data.income_month
        this.form.industry_name = response.data.industry_name
        this.form.name = response.data.name
        this.form.price = response.data.price
        this.form.remark = response.data.remark
        this.form.sex = response.data.sex
        this.form.status = response.data.status
        this.form.type = response.data.type
        this.open = true;
        this.title = "修改投保用户";
        // console.log('form1', this.form);
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // console.log('form', this.form)
          getUser2(this.form).then(response => {
            // console.log('response', response)
            if(response.code==1){
              this.msgSuccess("修改成功");
            }

            this.open = false;
            this.getList();
          });

        }
      });
    },
    //批量删除
    handleDelete1() {
      var that = this;
      const ids = this.ids;
      // console.log('ids13', that.delList);
      this.$confirm('是否确认删除投保用户编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        delete_user(that.delList).then(res => {
          // console.log('删除成功', res)
          that.getList();
        })
        // delUser1(ids).then(res=>{
        //   console.log('res',res)
        //
        //
        //   that.msgSuccess("删除成功");
        // });
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id;
      this.delList.customer_id = ids;
      var that = this;
      // console.log('delList23', that.delList)
      this.$confirm('是否确认删除投保用户编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        // console.log('ids13', ids);
        delete_user(that.delList).then(res => {
          // console.log('res', res)
          that.getList();
          that.msgSuccess("删除成功");
        });
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this;
      // const queryParams = this.queryParams;
      // console.log('queryParams2', that.queryParams2)
      // console.log('ids', that.ids);

      if (that.ids.length != 0) {
        this.$confirm('是否确认导出数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          const loading = that.$loading({
            lock: true,
            text: '请耐心等待正在导出数据...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          listUser1(that.queryParams2).then(response => {
            loading.close();
            // console.log('导出数据', response)
            let link = document.createElement('a'); // 创建a标签
            link.style.display = 'none';
            let objectUrl = response.data;
            link.href = objectUrl;
            link.click();
            that.msgSuccess(response.msg);
            // console.log('导出数据',response)
          })
        }).then(response => {
          // console.log('批单明细',response.msg)
          // this.download(response.msg);
        })
      } else {
        this.$message.error('请选择要导出的数据!');
      }

    }
  }
};
</script>
<style scoped>
.app-container_conter{
  background: #F8FBFF;
  padding:30px;
  border-radius: 10px;
  box-sizing: border-box;
}
</style>



